<template>
  <div>
    <div class="div1">
      <div>
        <router-link
          :to="{ path: 'addRequest', query: { RequestType: '请假' } }"
          ><el-card shadow="hover" class="card1">
            <b class="span2">请 假</b>
          </el-card></router-link
        >
        <router-link
          :to="{ path: 'addRequest', query: { RequestType: '出差' } }"
          ><el-card shadow="hover" class="card3">
            <b class="span2">出 差</b>
          </el-card></router-link
        >
        <router-link
          :to="{ path: 'addRequest', query: { RequestType: '外勤' } }"
          ><el-card shadow="hover" class="card3">
            <b class="span2">外 勤</b>
          </el-card></router-link
        >
        <router-link
          :to="{ path: 'addRequest', query: { RequestType: '加班离岗' } }"
          ><el-card shadow="hover" class="card3">
            <b class="span2">加 班</b>
          </el-card></router-link
        >
      </div>

      <div>
        <el-card class="card2-1">
          <div slot="header" class="clearfixb">
            <b>部门合同额同比</b>
          </div>
          <div class="card2-2div1" id="main2"></div>
        </el-card>
        <el-card class="card2-2">
          <div slot="header" class="clearfixb">
            <b>合同收款综合统计</b>
          </div>
          <div class="card2-2div" id="main"></div>
        </el-card>
      </div>
    </div>

    <div class="div2">
      <el-card class="card4">
        <div slot="header" class="clearfix">
          <b>公 告</b><span class="header2">NOTIC</span>
        </div>

        <div>
          <vue-seamless-scroll
            :data="form"
            class="winners-list-cont"
            :class-option="classOption"
          >
            <ul style="list-style-type: none">
              <li v-for="(item, index) of form" :key="index">
                <router-link :to="{ path: '/' }"><h5 class="h4">{{ item.Ntitel }}</h5></router-link>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
const echarts = require("echarts");

var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
  xAxisData.push("A" + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
export default {
  components: {
    vueSeamlessScroll,
  },

  name: "echarts",
  data() {
    return {
      form: [],
    };
  },
  created() {
    this.GetUP();
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.form.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.echartsInit();
    this.echartsInittoo();
  },

  methods: {
    //饼状图
    echartsInit() {
      echarts.init(document.getElementById("main2")).setOption({
        legend: {
          data: ["bar", "bar2"],
        },
        toolbox: {
          // y: 'bottom',
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false,
          },
        },
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            data: data1,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10;
            },
          },
          {
            name: "bar2",
            type: "bar",
            data: data2,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            },
          },
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      });
    },
    echartsInittoo() {
      echarts.init(document.getElementById("main")).setOption({
        legend: {
          top: "bottom",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 150],
            center: ["40%", "45%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              show: false,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 26, name: "rose 6" },
              { value: 22, name: "rose 7" },
              { value: 18, name: "rose 8" },
            ],
          },
        ],
      });
    },
    GetUP() {
      this.$http.get("Notice/getRM").then((res) => {
        this.form = res.data;
        console.log(this.form);
      });
    },
  },
};
</script>
<style  scoped>
.p1 {
  margin-left: 20%;
  font-size: 20px;
}

.div1 {
  width: 76%;
  float: left;
}
.div2 {
  width: 22%;
  height: 550px;
  float: right;
}
.card1 {
  float: left;
  width: 220px;
  height: 80px;
  margin-left: 10px;
  margin-top: 30px;
  background-color: #6ac8af;
  color: white;
}
.span2 {
  font-size: 30px;
  margin-left: 28%;
  font-family: 幼圆;
}
.card3 {
  float: left;
  width: 220px;
  height: 80px;
  margin-left: 74.5px;
  margin-top: 30px;
  background-color: #6ac8af;
  color: white;
}
.card2-1 {
  float: left;
  width: 60%;
  height: 400px;
  margin-left: 10px;
  margin-top: 20px;
}
.card2-2 {
  float: left;
  width: 35%;
  height: 400px;
  margin-left: 27px;
  margin-top: 20px;
}
.card2-2div {
  width: 100%;
  height: 350px;
  margin-left: 20px;
}
.card2-2div1 {
  width: 100%;
  height: 350px;
}
.card4 {
  width: 100%;
  height: 91.2%;
  margin-top: 30px;
}
.clearfix {
  font-family: 幼圆;
  font-size: 25px;
  text-align: center;
  color: rgba(50, 50, 50, 0.8);
}
.clearfixb {
  color: rgba(50, 50, 50, 0.8);;
  font-family: 幼圆;
}
.header2{
  color: rgba(50, 50, 50, 0.8);
  font-size: 15px;
  margin-left: 10px;
  font-family: 黑体;
}
.h4{
  color: black;
}
</style>
<style>
.winners-list-cont {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.router-link-active {
  text-decoration: none;
}
</style>



